/********** @name: box组件 @describtion: props: title:字段别名,value:字段值 @author:liubingye @date:2023-02-10 10:29:07 ***********/
<template>
  <el-form-item :label="props.title" class="expand-form-item">
    <el-cascader v-model="selectVal" :options="treeData" :props="treeProps" popper-class="pid-cascader" :placeholder="props.placeholder" style="width: 240px;"></el-cascader>
    <div v-if="props.children && props.children.length > 0" class="option-box">
      <div class="option-btn" @click="changeChildrenShow">
        <div class="option-btn-icon">
          <span :class="{ plus: childrenShow }"></span>
        </div>
        <p>{{ childrenShow ? "取消" : "拓展" }}</p>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { ref, reactive, computed } from "vue"
import { getOptions } from "@/utils/omnipotent"
import { useStore } from "vuex"

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: Number,
  },
  placeholder: {
    type: String,
    default: "",
  },
  children: {
    type: Array,
    default: () => [],
  },
  modelId: {
    type: String,
    default: ""
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  setting: {
    type: Object,
    default: () => {},
  },
})
const emits = defineEmits(["update:value", "update:childrenShow"])
const store = useStore()
const siteId = computed(() => store.state.site.currentSite?.id)
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
const selectVal = computed({
  get: () => props.value,
  set: (val) => {
    emits("update:value", val)
  },
})
// 级联数据
const treeData = ref([])
const treeProps = reactive({
  label: 'name',
  value: 'id',
  children: 'children',
  checkStrictly: true,
  expandTrigger: 'hover',
  emitPath: false,
})
const _getOptions = async () => {
  treeData.value = await getOptions('category', true, {siteId: siteId.value})
}
_getOptions()
</script>

<style scoped>
::v-deep .pid-cascader .el-cascader-panel .el-cascader-node>.el-radio{
  display: none;
}
</style>